<template>
    <div class="container" v-if = "weatherDisplay">
        <div class="title" v-if="localStorageCityName">你正在预览{{localStorageCityName}}的天气信息</div>
        <div class="title" v-else>你正在预览{{weatherDisplay.city}}的天气信息,可以通过右上角的"+"按钮保存起来</div>
        <div>当日气温是: <span>{{weatherDisplay.temperature}}摄氏度</span></div>
        <div>当日天气是: <span>{{ weatherDisplay.weather }}</span></div>
        <div>当日风向是: <span>{{weatherDisplay.winddirection}}风</span></div>
        <div>当日风力是: <span>{{weatherDisplay.windpower}}级</span></div>
    </div>
    <div class="container" v-else>
        正在加载数据...
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/Weather.js'
const weatherStore = useWeatherStore()
const { weatherDisplay,localStorageCityName } = storeToRefs(weatherStore)
const { getCurrentWeather,getLocalStorageCurrentWeather } = useWeatherStore()



onMounted(async () => {
    if (localStorageCityName.value) { 
        await getLocalStorageCurrentWeather() 
    } else {
        await getCurrentWeather()
    }
})
onUnmounted(() => { 
    localStorageCityName.value = ''
})


</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    
    &:nth-child(2) {
        margin-top: 60px;
        
    }
    .title {
        position: absolute;
        left: 0;
        right:0;
        top:80px;
       
        
        height: 40px;
        width: 100%;
        line-height: 40px;
        background:#004e71 ;
        text-align: center;
    }
}
</style>